<template>
  <div id="contacts">
    <div class="title">{{$route.query.nickname}}的{{ word }}</div>
    <div class="lists">
      <div class="person" v-for="(c, index) of contacts" :key="index" @click="toprofile(c.userId)">
        <div class="imgbox">
          <img :src="c.avatarUrl" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ c.nickname }}</div>
          <div class="sign">{{ c.signature }}</div>
          <div class="contact">
            <span>歌单：{{ c.playlistCount }}</span>
            <span>粉丝：{{ c.followeds }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Contacts",
  data() {
    return {
      word: "",
      contacts: [],
    };
  },
  methods: {
	  toprofile(id){
		  this.$bus.$emit("routeToUserProfile",id)
	  }
  },
  activated() {
    // console.log(this.$route.query);
    if (this.$route.query.i == 0) {
      this.word = "关注";
      axios
        .get("http://localhost:8013/api/user/follows?uid="+this.$route.query.userId)
        .then((res) => {
          this.contacts = res.data.follow;
        });
    }
    if (this.$route.query.i == 1) {
      this.word = "粉丝";
      axios
        .get("http://localhost:8013/api/user/followeds?uid="+this.$route.query.userId)
        .then((res) => {
          // console.log(res.data.followeds);
          this.contacts = res.data.followeds;
        });
    }
  },
};
</script>

<style scoped>
#contacts {
  line-height: 20px;
  text-align: left;
  padding-bottom: 80px;
}
.title {
  height: 60px;
  line-height: 60px;
  font-weight: 600;
  font-size: 20px;
  padding-left: 20px;
}
.lists {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
}
.lists img {
  width: 100%;
}
.person {
  width: 400px;
  margin-bottom: 50px;
  display: flex;
}
.imgbox {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.name {
  height: 45px;
  line-height: 45px;
}
.sign,
.contact,
.contact span {
  width: 250px;
  height: 22px;
  overflow: hidden;
  font-size: 12px;
  color: #888;
}
.contact span {
  padding-right: 40px;
}
</style>